<template>
  <div class="stat-alarm-times">
    <div class="alarm-item tower-alarm">
      <h1><i class="title-icon" /><i class="title-icon" />塔吊报警：(次)</h1>
      <div class="alarm-times">
        <span>0</span>
        <span>0</span>
        <span>2</span>
        <span>8</span>
      </div>
      <div class="alarm-scan">
        <img src="../../assets/images/scam-red.png" alt="">
        <img src="../../assets/images/sector-red.png" alt="">
      </div>
    </div>
    <div class="alarm-item mechanical-alarm">
      <h1><i class="title-icon" /><i class="title-icon" />机械总数量 (个)</h1>
      <div class="alarm-times">
        <span>0</span>
        <span>0</span>
        <span>2</span>
        <span>3</span>
      </div>
      <div class="alarm-scan">
        <img src="../../assets/images/scam-green.png" alt="">
        <img src="../../assets/images/sector-green.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlarmTimes',
  data() {
    return {

    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
.stat-alarm-times{
  display:flex;
  justify-content: space-between;
  width:100%;
  height:297px;
  height:57%!important;
  .alarm-item{
    width:47.33%;
    height:100%;
    background:linear-gradient(180deg,rgba(99,245,245,0.18) 0%,rgba(50,123,123,0.18) 100%);
    border-radius:0px 0px 107px 107px;
    @include border-top-style;
    h1{
      margin:23px 0 19px 0;
      padding:0 7.9%;
      width:100%;
      height:changePxToRem(20);
      line-height:changePxToRem(20);
      @include fontSizeRem(20);
      text-align:center;
      font-weight:800;
      color:rgba(255,255,255,1);
      >i.title-icon{
        float:left;
        margin-right:1.4%;
         width:9px;
        height:100%;
        background: #63F5F5;
        transform:skew(-30deg);
        &:last-of-type{
          margin-right:2.8%;
        }
      }
    }
    .alarm-times{
      padding:0 15.9%;
      display:flex;
      justify-content: space-between;
      span{
        width:17.2%;
        height:40px;
        text-align:center;
        line-height:40px;
        background-color:#161A25;
      }
    }
    .alarm-scan{
      width:68.5%;
      margin:6% auto 0 auto;
      position:relative;
      img:first-of-type{
        width:100%;
        height:auto;
      }
    }
     &:first-of-type>.alarm-scan{
        img:nth-of-type(2){
          position:absolute;
          left:51.3%;
          top:50%;
          width:36.9%;
          height:auto;
          animation: rotateAll linear 3s infinite;
          -webkit-animation: rotateAll 3s linear infinite;
          transform-origin: 0 0;
        }
      }
      &:nth-of-type(2)>.alarm-scan{
         img:nth-of-type(2){
          position:absolute;
           width:62.7%;
           height:auto;
           left:50%;
           top:17.8%;
           animation: rotateAll linear 3s infinite;
          -webkit-animation: rotateAll linear 3s infinite;
          transform-origin: 0 50%;
        }
      }
    &:first-of-type{
      .alarm-times{
        >span:nth-child(-n+2){
          color:#fff;
        }
        >span:nth-child(n+3){
          color:#FC0000;
        }
      }
    }
    &:nth-of-type(2){
      .alarm-times{
        >span:nth-child(-n+2){
          color:#fff;
        }
        >span:nth-child(n+3){
          color:#328F32;
        }
      }
    }
  }
}
@media screen and (max-width:1366px){
  .trapezoid-title{
    @include fontSizeRem(10)
  }
  .name-attendance{
    >div{
       >span.total-num{
        @include fontSizeRem(32);
      }
    }
  }
  .stat-alarm-times{
  .alarm-item{
    h1{
      margin:15px 0 12px 0;
      padding:0 7.9%;
      height:changePxToRem(13);
      line-height:changePxToRem(13);
      @include fontSizeRem(13);
    }
    .alarm-times {
      span{
        height:20px;
        line-height:20px;
      }
    }
     .alarm-scan{
        width:55%;
      }
  }
  }
}
@keyframes rotateAll{
  from{
    transform:rotate(0deg)
  }
  to{
    transform:rotate(360deg);
  }
}
@-webkit-keyframes rotateAll{
  from{
    -webkit-transform:rotate(0deg)
  }
  to{
    -webkit-transform:rotate(360deg);
  }
}

</style>
